/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2020-08-17 16:56:34
 * @Description: file content
 */

import React, { Component } from 'react';
import { StyleSheet, View, Image, Text, TouchableOpacity } from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  priceColor,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColor_lightCoffee,
} from '@/styles';

export default class ChooseItem extends Component {
  static defaultProps = {
    style: {},
    text: '全部',
    key: 0,
    activeKey: 0,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { style, text, id, activeKey, onChangeCate } = this.props;
    return (
      <TouchableOpacity activeOpacity={0.8} onPress={() => { onChangeCate(id); }}>
        <View
          style={[
            styles.container,
            style,
            activeKey == id && { backgroundColor: fontColor_lightCoffee },
          ]}
        >
          <Text
            allowFontScaling={false}
            style={[
              styles.symbol,
              activeKey == id && { color: fontColorCoffee },
            ]}
          >
            {text}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    minWidth: px2dp(140),
    height: px2dp(56),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(28),
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: px2dp(28)
  },
  symbol: {
    color: fontColorDeepGray,
    fontSize: px2dp(28),
  },
});
